<script setup>
import { ref, watch } from 'vue';

const money = ref(10000);
const add = () => {
  money.value += 1000;
};

const age = ref(20);
const changeAge = () => {
  age.value++;
};

const obj = ref({ name: 'zs' });
const changeName = () => {
  obj.value.name += '~';
};
/*
 watch监视, 接收三个参数
 1. 参数1: 监视的数据源
 2. 参数2: 回调函数
 3. 参数3: 额外的配置
*/
// ✨✨监听单个数据的变化
// watch(money, (value, oldValue) => {
//   console.log('value -----> ', value);
//   console.log('oldValue -----> ', oldValue);
// });

// 监听多个数据的变化
// watch([money, age], (value, oldValue) => {
//   console.log('value -----> ', value);
//   console.log('oldValue -----> ', oldValue);
// });

// ✨✨监听对象的改变,如果是深层的数据，需要开启 {deep: true}
/* 
obj = {
  value: { name: 'zs' }
}
修改 obj.value.name 的时候，其实内存地址压根没改变过，那么也不会触发回调
*/
watch(
  obj,
  (value, oldValue) => {
    console.log('value -----> ', value);
    console.log('oldValue -----> ', oldValue);
  },
  {
    deep: true,
  }
);

// 监听对象某个深层属性的变化，减少性能损耗(实际用得非常少)
/* 
直接写 obj.value.name，其实就等于读取了 'zs'，没有建立过依赖
()=> obj.value.name,应该是用 函数
*/
watch(
  () => obj.value.name,
  (value, oldValue) => {
    console.log('value -----> ', value);
    console.log('oldValue -----> ', oldValue);
  }
);
</script>

<template>
  <h1>
    <div>{{ money }}</div>
    <button @click="add">点我+1000工资</button>
    <div>{{ age }}</div>
    <button @click="changeAge">点我年龄+1</button>
    <div>{{ obj.name }}</div>
    <button @click="changeName">点我改名</button>
  </h1>
</template>
